<template>
  <div>
    <group>
      <!--<x-switch :title="$t('Basic Usage')" v-model="show1"></x-switch>
      <x-switch :title="$t('Android Theme')" v-model="show7"></x-switch>
      <x-switch :title="$t('Show cancel menu')" v-model="show2"></x-switch>-->
      <x-switch :title="'Array menu'" v-model="show5"></x-switch>
    </group>
    <actionsheet v-model="show5" :menus="menus5" show-cancel @on-click-menu="click"></actionsheet>
  </div>
</template>

<script>
  import { Group, XSwitch,Actionsheet } from 'vux'
  export default {
      name: 'actionSheet',
      components: {
        Actionsheet,
        Group,
        XSwitch,
      },
      data() {
          return {
              show5: false,
              menus5:[{
                label: 'type:info 不能点击',
                type: 'info'
              }, {
                label: 'Primary',
                type: 'primary',
                value: 'primary'
              }, {
                label: 'Warn',
                type: 'warn'
              }, {
                label: 'Disabled',
                type: 'disabled'
              }, {
                label: 'Default'
              }],
          }
      },
      methods: {
        click (key) {
          console.log(key)
        }
      }
  }
</script>
<style>

</style>
